<template>
    <div id="staffmanage" class="min_width">
        <!--头部导航-->
        <Header :chooseIt="chooseIt"></Header>
        <!--头部导航结束-->
        <main class="mainShow">
            <!-- 左侧导航 -->
            <div class="main-left">
                <!-- 多级导航 -->
                <el-aside width="100%" style="color: #333">
                    <el-menu default-active="/promoterList" :router="true" :unique-opened='true'>

                        <el-submenu index="/cardrechargeol">
                            <template slot="title">销售员管理</template>
                            <el-menu-item-group>
                                <el-menu-item
                                        index="/promoterList"
                                        :class="{'isActive': active == '/promoterList' || active == '/promoterAdd' }"
                                        @click="reload()"
                                >销售列表</el-menu-item>
                                <!--<el-menu-item-->
                                        <!--index="/promoterAdd"-->
                                        <!--:class="{'isActive': active == '/promoterAdd'  && type==0 }"-->
                                        <!--@click="reload()"-->
                                <!--&gt;添加销售</el-menu-item>-->
                            </el-menu-item-group>
                        </el-submenu>
                        <!-- 维修员管理 -->
                        <el-submenu index="/repairMange">
                            <template slot="title">维修员管理</template>
                            <el-menu-item-group>
                                <el-menu-item
                                        index="/repairMange"
                                        :class="{'isActive': active == '/repairMange'|| active == '/addRepair'}"
                                        @click="reload()"
                                >维修员列表</el-menu-item>
                                <!-- <el-menu-item
                                  index="/addRepair"
                                  :class="{'isActive': active == '/addRepair'}"
                                  @click="reload()"
                                >添加维修员</el-menu-item> -->
                            </el-menu-item-group>
                        </el-submenu>
                    </el-menu>
                </el-aside>
            </div>
            <!-- 左侧导航结束  -->

            <!-- 右侧主内容区 -->
            <div class="main-right">
                <transition name="fade">
                    <router-view class="view" :key="activeDate"></router-view>
                </transition>
            </div>
            <!-- 右侧主内容区结束 -->
        </main>
    </div>
</template>

<script>
    import $ from "jquery";
    export default {
        name: "staffmanage",
        data: function() {
            return {
                activeDate: "", //刷新页面
                chooseIt: 13,
                active: "/promoterList",
                headerFixed: true,
                type: 0
            };
        },
        created: function() {
          this.active = this.$route.path;
        },
         // 提供可注入子组件属性
		provide () {
			return {
				reload: this.reload
			}
		},
		methods: {
			//当前选中状态 reload定义
			reload() {
				// $nextTick() 将回调延迟到下次 DOM 更新循环之后执行
				this.$nextTick(() => {
					this.activeDate = Number(Date.parse(new Date()));
				})
			},
            //获取屏幕高度
            getHeight() {
                var newHeight = $(window).height() - 100;
                $(".mainShow").css("min-height", newHeight + "px");
            }
        },
        mounted() {
            this.getHeight();
        },
        watch: {
            $route: function(to, from) {
                let { type = 0 } = to.query;
                this.type = type;
                this.active = to.path;
            },
            deep: true
        }
    };
</script>

<style>
    body {
        margin: 0;
        padding: 0;
    }
</style>
